<template>
    <div class="content">
        <u-sticky bgColor="#fff">
            <tab-list :list="tabList" :activeIndex="activeIndex" @change="onTabChange" />
        </u-sticky>
        <div class="record-list">
            <div
                class="record-item"
                v-for="item in recordList"
                @click="toDetail(item.id)"
                :key="item.id"
            >
                <div class="head">
                    <div class="left">
                        <img class="icon" src="@/static/images/common/shop.png" />
                        {{ item.studyhallName }}
                    </div>
                    <p
                        class="status"
                        :class="[{ warning: item.status === 0 }, { success: item.status === 1 }]"
                    >
                        {{ item.status | statusFilter }}
                    </p>
                </div>
                <div class="sub-item" v-if="item.seatTypeName">
                    <p class="label">区域桌号</p>
                    <p class="value">{{ item.seatTypeName || '' }} {{ item.seatNo || '' }}号</p>
                </div>
                <div class="sub-item">
                    <p class="label">预约时间</p>
                    <p class="value">
                        {{ formatTime(item.reserveStartTime) }} 至
                        {{ formatTime(item.reserveEndTime) }}
                    </p>
                </div>
                <div class="sub-item" v-if="item.userCardNames.length > 0">
                    <p class="label">支付方式</p>
                    <p class="value">{{ (item.userCardNames || '').join('、') }}</p>
                </div>
            </div>
        </div>
        <div class="empty" v-if="empty">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">您当前没有定座记录</p>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
import TabList from '@/components/TabList';
export default {
    name: 'order-record',
    components: {
        TabList,
    },
    data() {
        return {
            activeIndex: 0,
            tabList: [
                { name: '全部', status: null },
                { name: '未开始', status: 0 },
                { name: '进行中', status: 1 },
                { name: '已完成', status: 2 },
                { name: '已取消', status: 3 },
                { name: '已关闭', status: 4 },
            ],
            params: {
                pageNo: 1,
                pageSize: 20,
            },
            recordList: [],
            total: 0,
            empty: false,
            finish: false,
        };
    },
    onShow() {
        this.refreshList();
    },
    onPullDownRefresh() {
        this.refreshList();
    },
    onReachBottom() {
        this.refreshList(true);
    },
    methods: {
        onTabChange(index) {
            this.activeIndex = index;
            if (index === 0) {
                delete this.params.status;
            } else {
                this.params.status = this.tabList[index].status;
            }
            this.refreshList();
        },
        formatTime(val) {
            return dayjs(val).format('YYYY-MM-DD');
        },
        toDetail(id) {
            uni.navigateTo({
                url: '/pages/my/seat-detail?id=' + id,
            });
        },
        getRecordList(load) {
            if (this.recordList < this.total || (!this.empty && !this.finish)) {
                this.$Api.study.reserve
                    .page({
                        ...this.params,
                    })
                    .then(res => {
                        if (!load) {
                            this.recordList = res.list;
                        } else {
                            this.recordList = this.recordList.concat(res.list);
                        }
                        this.params.pageNo++;
                        this.total = res.total;
                        if (res.total === 0) {
                            this.empty = true;
                        }
                        if (this.recordList.length === res.total) {
                            this.finish = true;
                        }
                        uni.stopPullDownRefresh();
                    });
            }
        },
        refreshList(load) {
            if (!load) {
                this.recordList = [];
                this.total = 0;
                this.empty = false;
                this.finish = false;
                this.params.pageNo = 1;
            }
            this.getRecordList();
        },
    },
    filters: {
        statusFilter(val) {
            switch (val) {
                case 0:
                    return '未开始';
                case 1:
                    return '进行中';
                case 2:
                    return '已完成';
                case 3:
                    return '已取消';
                case 4:
                    return '已退款';
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    .record-list {
        padding: 20rpx 30rpx;
        .record-item {
            padding: 20rpx 32rpx;
            background: #fff;
            border-radius: 24rpx;
            margin-bottom: 20rpx;
            .head {
                padding-bottom: 12rpx;
                border-bottom: 1rpx solid #e5e5e5;
                @include flexBox(space-between, center);
                .left {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #2f2f2f;
                    @include flexBox(flex-start, center);
                    .icon {
                        width: 48rpx;
                        height: 48rpx;
                        margin-right: 10rpx;
                    }
                }
                .status {
                    font-size: 24rpx;
                    font-weight: 600;
                    color: #5c5c5c;
                    &.warning {
                        color: #fa6400;
                    }
                    &.success {
                        color: #49b25b;
                    }
                }
            }
            .sub-item {
                margin-top: 22rpx;
                @include flexBox(flex-start, flex-start);
                .label {
                    font-size: 28rpx;
                    color: #898989;
                    margin-right: 32rpx;
                    white-space: nowrap;
                }
                .value {
                    font-size: 28rpx;
                    color: #2f2f2f;
                }
            }
        }
    }
}
</style>
